{% extends "_layout.html" %}

{# 样式代码 #}
{% block style %}
    <link href="{{ ctx.app.config.staticUrl }}/css/index.css" rel="stylesheet" >
    <link href="{{ ctx.app.config.staticUrl }}/css/swiper.min.css" rel="stylesheet" >
    <link href="{{ ctx.app.config.staticUrl }}/css/animate.min.css" rel="stylesheet" >
{% endblock %}

{# body代码#}
{% block body %}
	<!--container start-->
	<div class="container_white" id="about">
		<div class="why_choose" style="background: url(img/about_01.jpg) no-repeat center;">
			<div class="why_choose_pop wow fadeIn" data-wow-duration="1s" data-wow-delay="0.1s" data-wow-offset="1000"></div>
			<div class="why_container wow fadeInUpBig" data-wow-duration="1.1s" data-wow-delay="0.3s" data-wow-offset="700">
				<!--<h1>为什么选择做美食？</h1>
				<h2>因为我们都是追求梦想、热爱生活的人。</h2>
				<h1>为什么会有食艺道？</h1>
				<h2>因为我们想向您传递全新的简餐理念。</h2>
				<p>也许你也和大多数人一样，爱美食、爱旅游、爱工作、爱生活，
					<br>遇见食艺道，就好像遇见了一个更好的自己，
					<br>我们做的是一份简餐，但又不仅仅是一份简餐，
					<br>精致、美味、营养、搭配、创意、细节都是我们的追求目标，
					<br>一盏灯，一杯茶，用美食，取阴霾。</p>
				<h1>时光......不会辜负每一个热爱美食的人！</h1>-->
				<div class="about_img">
					<img src="img/about_09.png"/>
				</div>
				<div class="watch_video">
					<a href="javascript:void(0);" onclick="watchVideo()"><img src="img/WATCH_VIDEO.png"/></a>
				</div>
			</div>					
		</div>
		<div class="about_box online_ordering">
			<div class="about_title">在线预订</div>
			<p>食艺道是一个专业从事于研发高端简餐并且提供外送的线上品牌。我们力邀在各个菜系的顶级厨师，融合各自领域的特点，合作设计出令您耳目一新的新时代商务简餐。目前食艺道只接受在线订购，您可在食艺道官方网站或者官方微信上注册成会员，方便快捷得进行订购操作。</p>
			<div class="about_box_con">
				<div class="about_img fr wow fadeInRight" data-wow-duration="2s" data-wow-delay="0.5s">
					<img src="img/about_02.png"/>
				</div>
				<div class="car_img wow fadeInLeftBig" data-wow-duration="2s" data-wow-delay="0.5s">
					<img src="img/about_03.png"/>
				</div>
			</div>
		</div>
		<div class="about_box tableware">
			<div class="about_title">环保设计</div>
			<p>食艺道的一大初衷就是励志于环保事业的支持与推广，采用的所有配件都为环保材质，可重复利用。针对可回收环保配件（环保筷、环保汤匙、环保水瓶），食艺道将根据您的意愿，统一回收处理，相关费用一并捐赠给社会公益组织。另一方面，在注重环保的同时，创新设计也是食艺道的一大特色。经过专业设计师们的精心设计，每一件配件都将带给您与众不同、焕然一新的视觉享受。</p>
			<div class="swiper-container banner_first">
				<div class="swiper-wrapper">
					<div class="swiper-slide" style="background: url(img/about_04.png) no-repeat center;">
					</div>
					<div class="swiper-slide" style="background: url(img/about_04.png) no-repeat center;">
					</div>
					<div class="swiper-slide" style="background: url(img/about_04.png) no-repeat center;">
					</div>
				</div>
				<!-- Add Pagination -->
				<div class="swiper-pagination"></div>
			</div>
		</div>
		<div class="about_box surprised">
			<div class="about_title">专属礼遇</div>
			<p>食艺道除了为您呈递全新的艺术简餐概念,感受美食与视觉的双重愉悦之外，我们针对食艺道高级会员以及有个性定制要求的个人会员或者企业团体组织，不论从配件到礼品，都将为您精心设计出独特且新颖的专属礼遇。带给您最真挚的祝福以及最贴心的服务，令您体验到宾至如归的尊贵享受。</p>
			<div class="swiper-container banner_second">
				<div class="swiper-wrapper">
					<div class="swiper-slide" style="background: url(img/about_02.jpg) no-repeat center;">
					</div>
					<div class="swiper-slide" style="background: url(img/about_02.jpg) no-repeat center;">
					</div>
					<div class="swiper-slide" style="background: url(img/about_02.jpg) no-repeat center;">
					</div>
				</div>
				<!-- Add Pagination -->
				<div class="swiper-pagination"></div>
			</div>
		</div>
		<div class="about_box fresh_food">
			<div class="about_title">精选食材</div>
			<p>食艺道采用的每一味食材，都是通过正规专业渠道所采购的，确保了菜品新鲜且无任何有害物质添加。另外，为了尽量发挥出每一道餐品的极致美味，食艺道都会选用各食材类别内相对应的高品质原料，给到您至臻的舌尖体验。</p>
			<div class="food_img" style="background: url(img/about_03.jpg) no-repeat center;">
				<div class="chef_img wow fadeInLeft" data-wow-duration="1s" data-wow-delay="0.5s">
					<img src="img/about_08.png"/>
				</div>
			</div>
		</div>
	</div>
	<!--container end-->
	<!--视频弹出框-->
	<div class="video_box">
		<video id="VidageVideo" class="Vidage__video" preload="metadata" loop="loop" controls="controls">
	        <source src="video/syd.mp4" type="video/mp4">
	   	</video>
	   	<div class="close_video" onclick="closeVideo()">
	   		<img src="img/close.png"/>
	   	</div>
	</div>
	<div class="video_bg" onclick="closeVideo()"></div>
{% endblock %}
{#js代码#}
{% block js %}
    <script type="text/javascript" src="js/index.js"></script>
	<script type="text/javascript" src="js/wow.min.js"></script>
	<script>
		var wow = new WOW({
		    boxClass: 'wow',
		    animateClass: 'animated'
		});
		wow.init();
	</script>
	<script type="text/javascript">
	    var swiperA = new Swiper('.banner_first', {
	        pagination: '.swiper-pagination',
	        paginationClickable: true,
	        autoplayDisableOnInteraction : false,
	        effect : 'fade',
		    loop: true,
		    autoplay: 3000
	    });
	    var swiperB = new Swiper('.banner_second', {
	        pagination: '.swiper-pagination',
	        paginationClickable: true,
	        autoplayDisableOnInteraction : false,
		    loop: true,
		    autoplay: 3000
	    });
	</script>
{% endblock %}
